<template>
	<div class="wrapper" ref="wrapper">
		<!-- 插槽 -->
		<slot></slot>
	</div>
</template>

<script>
//改组件为全局组件
	import BetterScroll from 'better-scroll'
	export default {
		props:{
			handleScroll:{
				type:Function,
				default:function(){}
			},
			handleTouchEnd:{
				type:Function,
				default:function(){}//给一个默认值 防止报错
			}
		},
		mounted() {//该容器是一个视口
				let scroll = new BetterScroll(this.$refs.wrapper, {
					click: true,
					probeType: 1//节流
				});
				this.scroll = scroll;//将scroll挂载到this上
				scroll.on('scroll',(pos)=>{//当触发scroll事件时调用父组件的这个函数
					this.handleScroll(pos)
				})
				scroll.on('touchEnd',(pos)=>{
					this.handleTouchEnd(pos)
				})
		},
		methods:{
			toScrollTop(y){
				//因为在该钩子函数中获取不到scroll对象所以 挂在到了this上
				this.scroll.scrollTo(0,y);
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		height: 100%;
	}
</style>
